<template>
  <div>
    <div class="say">
      <el-table :data="tableData" height="210" stripe style="width: 40%">
      <el-table-column
        :width="columWidth(item.prop)"
        v-for="item in tableItem"
        :key="item.id"
        :prop="item.prop"
        :label="item.label"
      >
        <template slot-scope="scope">
          <span
            class="message"
            style="cursor: pointer"
            v-if="item.prop !== 'time'"
            @click="showMessage(scope.row)"
            >{{ scope.row[item.prop] }}</span
          >
          <span v-if="item.prop === 'time'"
            @click="showMessage(scope.row)"
          >{{
            scope.row[item.prop] | format
          }}</span>
          <el-button type="danger" plain v-if="item.prop === 'option'"
            @click="delChat(scope.row.id)">删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-table :data="tableData1" stripe height="210" style="width: 40%">
      <el-table-column
        :width="columWidth(item.prop)"
        v-for="item in tableItem"
        :key="item.id"
        :prop="item.prop"
        :label="item.label"
      >
        <template slot-scope="scope">
          <el-button type="danger" plain v-if="item.prop === 'option'"
            @click="delChat(scope.row.id)">删除</el-button
          >
          <span
            class="message"
            style="cursor: pointer"
            v-if="item.prop !== 'time'"
            @click="showMessage(scope.row)"
            >{{ scope.row[item.prop] }}</span
          >
          <span v-if="item.prop === 'time'"
            @click="showMessage(scope.row)"
          >{{
            scope.row[item.prop] | format
          }}</span>
        </template>
      </el-table-column>
    </el-table>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span class="error">你确定要删除该消息吗(不可改变)</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
    <transition name="fadeIn">
      <div v-if="openMessage">
        <div class="black" @click="closeMessage"></div>
        <div>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>时间: {{ time | format }}</span>
              <span style="marginleft: 20px">用户名: {{ username }}</span>
            </div>
            <div>{{ message }}</div>
          </el-card>
        </div>
      </div>
    </transition>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import format from "../formatTime";
type ItemData = {
  id: string;
  prop: string;
  label: string;
};
type TableData = {
  id:number,
  time:string,
  message:string
}
@Component({
  filters: {
    format(val: string) {
      return format(val);
    },
  },
})
export default class say extends Vue {
  private tableData = [];
  private tableData1 = [];
  private tableDataAll = [];
  private id:number = 0
  private time: string = "";
  private dialogVisible:boolean = false
  private message: string = "";
  private openMessage: boolean = false;
  private tableItem: ItemData[] = [
    { id: "0", prop: "id", label: "id" },
    { id: "1", prop: "time", label: "时间" },
    { id: "2", prop: "message", label: "消息" },
    { id: "3", prop: "option", label: "操作" },
  ];
  get columWidth() {
    return function (val: string) {
      return val === "id" ? 70 : 0;
    };
  }
  @Prop() private username!: string;
  created() {
    this.getAllSayList();
  }
  delChat(id:number):void{
    this.id = id
    this.dialogVisible = true
  }
  confirm():void{
    this.$axios.post("/chat/del",
    {
      id:this.id
    }).then(res=>{
      console.log(res)
      if (res.data.error === -1) {
          this.$message({
            type: "success",
            message: "删除成功",
          });
          this.dialogVisible = false;
          this.getAllSayList();
        } else {
          this.$message({
            type: "error",
            message: "删除失败",
          });
          this.dialogVisible = false;
        }
    })
  }
  showMessage(val:TableData){
    this.openMessage = true
    this.time = val.time
    this.message = val.message
  }
  closeMessage() {
    this.openMessage = false
  }
  getAllSayList() {
    this.$axios
      .get("/chat/search", {
        params: {
          username: this.username,
          Tousername: "2628735401",
        },
      })
      .then((res) => {
        console.log(res);
        if (res.data.error === -1) {
          this.tableData = res.data.data.filter(
            (item: string | number, index: number) => {
              return index % 2 === 0;
            }
          );
          this.tableData1 = res.data.data.filter(
            (item: string | number, index: number) => {
              return index % 2 === 1;
            }
          );
        } else {
          this.tableData = [];
        }
      });
  }
}
</script>

<style lang="less" scoped>
@import url("../assets/css/animate.css");
.say {
  display: flex;
  justify-content: space-between;
  span{
  display: inline-block;
  line-height: 60px;
  width: 100%;
  transition: all .3s;
  cursor: pointer;
  &:hover{
    background-color: burlywood;
  }
}
}
.message {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.black {
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  width: 100vw;
  height: 300px;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.6);
}
.box-card {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 60%;
  height: 200px;
  z-index: 9;

  .clearfix {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  span {
    margin: 0 10px;
  }
}

</style>